<script setup>
	import { computed, ref } from 'vue';
	const props = defineProps( {
		id: String,
		name: String,
		cover_pic: String,
		buy_price: Number,
		original_price: Number,
		sku: {
			type: Array,
			default ( ) {
				return [ ]
			}
		}
	} )
	const emit = defineEmits( [ "changeNum" ] )
	const num = ref( 0 )
	const data = ref( {} )
	// 是否显示 减少按钮
	const showMinus = ref( false )
	// 步进器改变回调
	const changeNum = ( e ) => {
		showMinus.value = true
		if ( e.value <= 0 ) {
			showMinus.value = false
		}
		data.value = {
			pro_id: props.id,
			name: props.name,
			cover_pic: props.cover_pic,
			num: e.value,
			buy_price: props.buy_price,
			original_price: props.original_price,
			sku: props.sku
		}

		// 将事件提交到父组件
		emit( "changeNum", data.value )
	}
</script>
<template>
	<view class="number-box">
		<up-number-box v-model="num" :min="0" :showMinus="showMinus" @change="changeNum">
			<template #minus>
				<view class="minus">
					<up-icon name="minus" size="12"></up-icon>
				</view>
			</template>
			<template #input>
				<text v-if="showMinus" style="width: 50px;text-align: center;" class="input">{{num}}</text>
			</template>
			<template #plus>
				<view class="plus">
					<up-icon name="plus" color="#FFFFFF" size="12"></up-icon>
				</view>
			</template>
		</up-number-box>
	</view>
</template>


<style lang="scss" scoped>
	.number-box {
		.minus {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			border: 1px solid $text-font-color-4;
		}

		.input {
			padding: 0 20rpx;
			color: $text-font-color-2;
		}

		.plus {
			display: flex;
			width: 44rpx;
			height: 44rpx;
			background-color: $brand-theme-color;
			border-radius: 50%;
			justify-content: center;
			align-items: center;
		}
	}
</style>